<template>
  <el-card class="cards">
    <el-row type="flex" justify="space-between">
      <el-col :span='12'>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="关键字">
            <el-input style="width:50%" v-model="form.keyword"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span='3'>
        <el-button @click="form.keyword = ''">清除</el-button>
        <el-button type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 警告栏 -->
    <el-alert :title="totals" type="info" :closable='false'/>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%" class="tables">
      <el-table-column prop="id" label="编号" width="270px"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="100px"></el-table-column>
      <el-table-column prop="questionIDs" label="题目编号" width="300px">
        <template slot-scope="{ row }">
          <div v-for="(item, index) in row.questionIDs" :key="index">
            <el-button type="text" @click="showDlalog">{{item.number}}</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="240px"></el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间" width="230px"></el-table-column>
      <el-table-column prop="accuracyRate" label="正确率" width="240px"></el-table-column>
      <el-table-column prop="userName" label="录入人" width="240px"></el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="{ row }">
          <el-button type="danger" icon="el-icon-delete" circle @click="delTopic(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
  </el-card>
</template>

<script>
import { topicList } from '@/api/topic'
// import { delTopic } from '@/api/topic'
export default {
  data() {
    return {
      form: {
        page: 1,
        pagesize: 15,
        keyword: ''
      },
      tableData: [],
      totals: 0,
      currentPage:1,
      pagesize:10,
      total:0,
      search: ''
      // indexResultsTable:[],
    }
  },
  created() {
      this.tableData = topicList.items
      // console.log(this.tableData);
      this.totals = `共有${'' + this.tableData.length}条数据`
      // this.indexResultsTable = this.tableData
      this.getResultsTable();
  },
  methods: {
    async delTopic(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        alert('删除成功')
        console.log(id);
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        });          
      });
    },
    handleSizeChange:function(size){
        this.pagesize = size;
        this.getResultsTable();
    },
    handleCurrentChange:function(page){
    this.currentPage = page;
    this.getResultsTable();
    },
    getResultsTable: function(type) {
      var self = this
      var list = topicList.items
      if (type && type === 'search') {
        list = this.List
      }
      this.tableData= list.filter(
        (item, index) =>
          index < self.currentPage * self.pagesize &&
          index >= self.pagesize * (self.currentPage - 1)
      )
      this.total = list.length
    },
    showDlalog() {
      alert('题目详情')
    }
  }
}
</script>

<style lang="scss" scoped>
.cards {
  margin-top: 20px;
}
.tables {
  margin-top: 10px;
}
</style>